<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击</button>
    <script>
      //防抖: 一段代码在 一定间隔时间内 只能触发一次 如果不停触发 就会重新计时
      //(施法前摇)
      //1.前置防抖: 先执行代码 再做防抖处理
      //2.后置防抖: 先做防抖出来 再执行代码

      //
      //
      //一.普通版本
      //1.前置防抖
      var btn = document.querySelector("button");
      var timer = null; //false
      btn.onclick = function () {
        //先要执行代码
        if (!timer) {
          console.log("需要执行的代码");
        }
        clearTimeout(timer); //清除上一次的timer 保证只有一个定时器
        timer = setTimeout(function () {
          timer = null;
        }, 1000);
        //每次点击都会执行if判断和定时器,点击之后timer取反为true 执行代码  然后定时器前面的timer = 1 , 1s内,1s后timer = null , 如果1s内再次点击button,if判断里面取反!timer  就是! 1  = false   ,就不会执行代码,等1s后 定时器执行  timer = null ,再进行if判断,if(!null) = true  执行代码
      };
      /*
      第一次点击: timer = null;
      !timer 是true   就会执行代码
      clearTimeout(null);
      timer就是1

      第二次点击(间隔时间小于1s) timer = 1
      !timer 是false  不会执行代码
      clearTimeout(1)
      timer 就是2


      第二次点击(间隔事件大于1s)  timer = null  和开始一样了

      */
      //
      //2.后置防抖
      btn.onclick = function () {
        var timer;
        clearTimeout(timer);
        timer = setTimeout(function () {
          console.log("需要执行的代码");
        }, 1000);
      };
      //后置防抖就是先进行定时器后输出代码,点击button1s后 执行代码再次点击 ,再等1s
    </script>
  </body>
</html>
